<template>
  <div class="rightBodyContent">
    <div class="rightBodyContent-in">
      <div class="topone mb-10">
        <div class="echarts-title-top">
          <em></em>学生餐评汇总
        </div>
        <div class="echarts-title">
          <div class="echarts-title-picker">
            <div class="block">
              <el-date-picker
                  v-model="value1"
                  type="daterange"
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                  format="yyyy-MM-dd"
                  value-format="yyyy-MM-dd"
                  size="small"
                  :picker-options="pickerOptions1">
              </el-date-picker>
            </div>
            <div class="block">
              <el-select v-model="sectionvalue" placeholder="选择年段" size="small" @change="sectionChange"
                         class="selectWidth">
                <el-option
                    v-for="(item,index) in sectionList"
                    :key="index"
                    :label="item.section_name"
                    :value="item.id">
                </el-option>
              </el-select>
            </div>
            <div class="block">
              <el-select v-model="classesvalue" placeholder="选择班级" size="small" class="selectWidth">
                <el-option
                    v-for="(item,index) in classesList"
                    :key="index"
                    :label="item.class_name"
                    :value="item.id">
                </el-option>
              </el-select>
            </div>
            <div class="block">
              <el-button type="primary" @click="searchBtn" size="small" icon="el-icon-search">搜索</el-button>
              <el-button @click="rearchBtn" size="small" icon="el-icon-refresh">重置</el-button>
            </div>
          </div>
          <!--<div class="echarts-title-right">-->
          <!--<span class="activetab">最近7天</span><span>最近一月</span>-->
          <!--</div>-->
        </div>
        <div class="echartsbody-height" v-if="echartsLine.length!==0">
          <div id="echarts" class="home_top_echarts"></div>
        </div>
        <div class="echartsbody-height nondata-p-echarts" v-else>
          <p>搜索不到相关数据</p>
        </div>
      </div>
      <div class="topone mb-10">
        <div class="echarts-title-top">
          <em></em>职工餐评汇总
        </div>
        <div class="echarts-title">
          <div class="echarts-title-picker">
            <div class="block">
              <el-date-picker
                  v-model="valueUser"
                  type="daterange"
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                  format="yyyy-MM-dd"
                  value-format="yyyy-MM-dd"
                  size="small"
                  :picker-options="pickerOptions1">
              </el-date-picker>
            </div>
            <div class="block">
              <el-button type="primary" @click="searchUserBtn" size="small" icon="el-icon-search">搜索</el-button>
              <el-button @click="rearchUserBtn" size="small" icon="el-icon-refresh">重置</el-button>
            </div>
          </div>
        </div>
        <div class="echartsbody-height" v-if="echartsUserLine.length!==0">
          <div id="echarts_user" class="home_top_echarts"></div>
        </div>
        <div class="echartsbody-height nondata-p-echarts" v-else>
          <p>搜索不到相关数据</p>
        </div>
      </div>
      <div class="listline-box">
        <div class="listmine-left topone">
          <p class="listmine-title"><span>前10排行</span>
            <el-button @click="downexcel" size="small" icon="el-icon-download" type="success">导出excel</el-button>
          </p>
          <p class="listmine-top-title"><span>排名</span><span>餐品</span><span>好评率</span></p>
          <ul class="listmine-ul" v-if="topLine.length!==0">
            <li v-for="(item,index) in 10" :key="index" :class="item<=topLine.length?'':'nonelineBody'">
              <span>{{ item }}</span>
              <span>{{ item <= topLine.length ? topLine[index].DishName : '暂无数据' }}</span>
              <span class="linebox">{{ item <= topLine.length ? topLine[index].favorableRate + '%' : '--' }}</span>
            </li>
          </ul>
          <ul class="listmine-ul" v-else>
            <li class="data-p-list">无排行数据</li>
          </ul>
        </div>
      </div>
      <div class="height40"></div>
      <iframe class="iframeDown iframeBoxLine" frameborder=0 name="showHere" scrolling=auto :src="iframeSrc"
              v-if="iframeState"></iframe>
    </div>
  </div>
</template>

<script>
import {foodCount} from '@/api/admin/food'

let echarts = require('echarts')
export default {
  data() {
    return {
      value1: '',
      timeValue: '',
      classesListNew: [],
      sectionList: [],
      classesList: [],
      sectionvalue: '',
      classesvalue: '',
      pickerOptions1: {
        disabledDate(time) {
          return time.getTime() > Date.now() - 8.64e7
        }
      },
      topLine: [],
      echartsLine: [],
      iframeState: false,
      iframeSrc: '',
      echartsUserLine: [],
      foodUserSearch: {
        start_time: '',
        end_time: ''
      },
      valueUser: []
    }
  },
  created() {
  },
  mounted() {
    this.InitFn()
    this.classList()
    this.foodCount()
  },
  methods: {
    // class_id：班级id
    // session_id:年段id
    // yesterday：时间段，例如2019-02-01 2019-02-28
    InitFn() {
      const loading = this.$loading({
        lock: true,
        text: '加载中…',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.5)'
      })
      this.$post(this.api.release_countByDashboard, {
        class_id: this.classesvalue,
        session_id: this.sectionvalue,
        yesterday: this.timeValue
      }).then((response) => {
        if (response.code === 0) {
          let nameLine = [];
          let dataLine = [];
          let dataLineNot = [];
          for (let i in response.list.list) {
            nameLine.push(response.list.list[i].DishName)
            dataLine.push(response.list.list[i].goodNum)
            dataLineNot.push(response.list.list[i].notGoodNum)
          }
          // 前10排行板
          for (let i in response.list.top) {
            let count = response.list.top[i].goodNum + response.list.top[i].notGoodNum
            let favorableRate = (response.list.top[i].goodNum / count).toFixed(2)
            let count_last = (favorableRate * 100).toFixed(2)
            if (count === 0) {
              count_last = 0
            }
            response.list.top[i].favorableRate = count_last
          }
          this.topLine = response.list.top
          this.echartsLine = response.list.list

          if (response.list.list.length !== 0) {
            this.echartsthree(nameLine, dataLine, dataLineNot, 1)
          }
          loading.close()
        } else {
        }
      }).catch((err) => {
        console.log(err)
      })
    },
    foodCount() {
      foodCount(this.foodUserSearch).then(res => {
        console.log(res)
        let nameLine = [];
        let dataLine = [];
        let dataLineNot = [];
        for (let item of res.list) {
          nameLine.push(item.food ? item.food.name : '未知')
          dataLine.push(Number(item.goods))
          dataLineNot.push(Number(item.bad))
        }
        this.echartsUserLine = res.list;
        this.echartsthree(nameLine, dataLine, dataLineNot, 2)
      })
    },
    classList() {
      // 年段
      this.$fetch(this.api.user_sectionindex, {p: this.page}).then((response) => {
        if (response.code === 0) {
          this.sectionList = response.list.data
        } else {
        }
      }).catch((err) => {
        console.log(err)
      })
      // 班级
      this.$fetch(this.api.user_classesindex, {p: this.page}).then((response) => {
        if (response.code === 0) {
          let array_ = {}
          for (let i in response.list.data) {
            let new_array = array_[response.list.data[i].section_id] || []
            new_array.push(response.list.data[i])
            array_[response.list.data[i].section_id] = new_array
          }
          this.classesListNew = array_
        } else {
        }
      }).catch((err) => {
        console.log(err)
      })
    },
    sectionChange(val) {
      for (let i in this.sectionList) {
        if (this.sectionList[i].id === val) {
          this.classesList = this.classesListNew[this.sectionList[i].section_name]
          this.classesvalue = ''
          return
        }
      }
    },
    searchBtn() {
      if (this.value1 && this.value1.length) {
        this.timeValue = this.value1.join(' ')
      }
      this.InitFn()
    },
    rearchBtn() {
      this.classesvalue = ''
      this.sectionvalue = ''
      this.value1 = []
      this.timeValue = ''
      this.InitFn()
    },
    echartsthree(name, data_, dataNot, type) {
      this.$nextTick(function () {
        let myChart = ''
        if (type === 1) {
          myChart = echarts.init(document.getElementById('echarts'))
        } else {
          myChart = echarts.init(document.getElementById('echarts_user'))
        }
        let rotate_ = 0
        if (data_.length > 7) {
          rotate_ = '-20'
        }
        let option = {
          tooltip: {
            show: true,
            trigger: 'axis',
            axisPointer: { // 坐标轴指示器，坐标轴触发有效
              type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
            }
          },
          color: ['#20a0ff'],
          grid: {
            left: '3%',
            right: '4%',
            bottom: '6%',
            containLabel: true
          },
          xAxis: {
            name: '菜品',
            type: 'category',
            axisTick: {show: false}, // 分割线
            axisLine: {show: false, lineStyle: {color: '#333'}},
            axisLabel: {rotate: rotate_},
            show: true,
            interval: 5,
            data: name
          },
          yAxis: {
            name: '数值',
            type: 'value'
          },
          series: [{
            name: '好吃',
            barMaxWidth: '40',
            data: data_,
            type: 'bar',
            itemStyle: {
              normal: {
                label: {
                  show: true,  //开启显示
                  position: 'top',  //在上方显示
                  textStyle: {  //数值样式
                    color: 'black',
                    fontSize: 16
                  }
                }
              }
            },
          },
            {
              name: '不好吃',
              barMaxWidth: '40',
              data: dataNot,
              type: 'bar',
              itemStyle: {
                normal: {
                  color: '#C33531',
                  label: {
                    show: true,  //开启显示
                    position: 'top',  //在上方显示
                    textStyle: {  //数值样式
                      color: 'black',
                      fontSize: 16
                    }
                  }
                }
              },
            }]
        }
        myChart.setOption(option)
      })
    },
    searchUserBtn() {
      if(this.valueUser && this.valueUser.length){
        this.foodUserSearch.start_time = this.valueUser[0]
        this.foodUserSearch.end_time = this.valueUser[1]
      }
      this.foodCount()
    },
    rearchUserBtn() {
      this.valueUser = []
      this.foodUserSearch.start_time = ''
      this.foodUserSearch.end_time = ''
      this.foodCount()
    },
    // 导出excel文件
    downexcel() {
      let timeValue = ''
      if (this.value1) {
        timeValue = this.value1.join(' ')
      }
      let that = this
      this.iframeState = true
      this.iframeSrc = this.$BASE_URL + '/admin/release_log/export?class_id=' + this.classesvalue + '&session_id=' + this.sectionvalue + '&yesterday=' + timeValue
      setTimeout(() => {
        that.iframeState = false
        that.iframeSrc = ''
      }, 500)
    }
  }
}
</script>
<style>
.echarts-title-top {
  padding: 20px 20px 0;
  display: flex;
  align-items: center;
  color: #333;
  font-size: 18px;
}

.echarts-title-top em {
  display: block;
  width: 4px;
  height: 17px;
  background: #006dcd;
  border-radius: 2px;
  margin-right: 10px;
}

.selectWidth {
  width: 130px;
}

#echarts_user {
  width: 100%;
  height: 100%;
}
</style>
